This is the walking steps of Dan Abramov’s Redux vedio tutorials.
\nPart 2: Building React Applications with Idiomatic Redux (27 free videos)\nhttps://egghead.io/courses/building-react-applications-with-idiomatic-redux
There are total 10 branches (step-1…step-9, main) to go through the video episodes.
\ngrab the source code from: https://github.com/reactjs/redux/tree/master/examples/todos\nconfig package.json, add webpack.config.js, do some updating, use webpack-dev-server to make the source working properly.
initial state in HTML 5 Local-storage.
\n store.subscribe(() => {\n saveState({'todos': store.getState()})\n})add node-uuid.v4, lodash/Throttle for subscribe(saveState)
Link for hashHistory URL.try to integrate williamDemo (Redux Universal) and react-redux-universal-hot-example into.
\nmongod &\nnpm run start1 \nopen http://localhost:8081\nopen http://localhost:/8081/api/routes/re-cast getVisibleTodos to reducers as a selector, so mapStateToProps use state instead of state.todos.
work at course-15.
\nusers tab works. It uses mongo + redux global state + react component.
mapStateToProps update state.userListhttp://localhost:8081/users
williamDemo repository.\nI prefer to make this repository as a template for react-redux-fullstack, so step by step to integrate some good stuff.checkout -b from step-6, at course-16.
\nchai-as-promised, and in karma.conf.js:\nfiles: [\n‘node_modules/babel-polyfill/dist/polyfill.js’,\n…\n]react-route-dom instead of react-routeonSubmit={this.props.handleSubmit} to onSubmit={(e)=>this.props.handleSubmit(e)} to fix fetching github repository no-return issue.request.js) to delegate accessing security website work.editModal not work, EditModal work.redux-form:\n— use initialValues to fill up the edit-form.\n— Field should have onChange, otherwise the input can’t edit, even nothing to do:
onChange={}— rewrite add/edit userReucer, use map, concat.\n— pass user.id as hidden: <input name=”id” type=“hidden” />
\ntodoApp, users, counter all interact with MongoDB data.rxjs@5.3.0, redux-observable will be used in input-searchisomorphic-fetch to use fetch alongside with superagent, for caching and performance reason.connect = Object.assign({}, ownProps, stateProps, dispatchProps);Users tab, add search user input box, to search user ‘fistName’ or ‘lastName’redux-observable for search criteria\nso this works: react + redux + rxjs (redux-observable)debounceTime for fetchUserEpicupdate server/routes/users.js for /api/users/search?search_criteria:
'$or': [ {firstName: regexp}, {lastName: regexp} ]import orderBy from 'lodash/orderBy' to reducer file which it is called. react-router-dom-v4: Topicsstyle-loaderRedirectlogin and logoutauth for login fetch.token property for future extension.react-bootstrap, react-router-bootstrap for responsive menu.add toggle login/logout works: add state.token in Root.js, just like in LoginApp.js, so these 2 parts are sync when login/logout.\nreact-redux-universal-hot-example:
export function logout() {\nreturn {\ntypes: [LOGOUT, LOGOUT_SUCCESS, LOGOUT_FAIL],\npromise: (client) => client.get('/logout')\n};\n}scripts:\n“immutable”: “mocha —compilers js:babel-core/register —require ./test/helper.js —recursive”\ndoes the same thing as karma.conf.jsncu\nncu -u\nnpm update\nkarma start karma.conf.jschai-as-promised to test promise: either return promise or done() will work: test/promise.spec.js.immutable and `chai-immutable installed and test.react-bootstrap throw warning (propTypes) with React ^15.4, ^15.5.npm updatenpm i -S prop-types, the warning is disappear. so fix.o: /api/users\nx: /api/delegate/github/williamjxj\nx: http://localhost:8081/api/delegate/jsonplaceholder
\nsass and scss?npm update\nreact-router ^3.0.0 → ^4.0.0Use react-router-dom instead:\nhttps://reacttraining.com/react-router
Link, NavLink from react-router-dom. $ npm install -g create-react-app\n $ create-react-app demo-app\n $ cd demo-app